import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  Switch,
  Picker,
  TouchableOpacity,
  Image
} from "react-native";
import Button from "../../components/Button";
import { connect } from "react-redux";
import HeaderDefault from "../../components/header/HeaderDefault";
import { theme_app, theme_text, theme_btnColor } from "../../utils/appTheme";
import Modal from "../../components/ModalBox";
import { dateTransform } from "../../utils/utils_date";
import { modifyTourNormal, addTourNormal } from "../../netServer/patrol";
import Toast from "react-native-simple-toast";
import PatientBaseHeader from "./PatientBaseHeader";
import { patientBaseInfo } from "../../netServer/signs_net";
import { red } from "ansi-colors";


class ConventionAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      P_b_info: {},//患者基本信息
      in_bed: true,
      direction: "其他",
      task_date: new Date(),
      condition: "无特殊",
      fridge: "正常",
      isCommitSuccess: false,
    };

    this._loadPatienBaseInfo = this._loadPatienBaseInfo.bind(this);



  }
  static navigationOptions = ({ navigation }) => ({
    gesturesEnabled: false,
    header: (
      <HeaderDefault
        backBtnOnPress={() => {
          let { currentRouterKey } = navigation.state.params;
          navigation.goBack(currentRouterKey);
        }}
        title={navigation.state.params.title}
      />
    )
  });

  _renderModalBox = (refhand, closeM, dataSoure, set_vale, sel_ValueChange) => {
    return (
      <Modal
        style={styles.modal3}
        position={"bottom"}
        backdropPressToClose={false}
        swipeToClose={false}
        ref={refhand}
      >
        <View style={{ flex: 1 }}>
          <View
            style={{
              width: screenWidth,
              height: 50,
              flexDirection: "row-reverse",
              alignItems: "center"
            }}
          >
            <TouchableOpacity
              onPress={closeM}
              style={{
                width: 50,
                height: 50,
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Image
                style={{ width: 30, height: 30 }}
                source={require("./src/guanbi.png")}
              />
            </TouchableOpacity>
          </View>

          <Picker
            selectedValue={set_vale}
            style={{ height: 50, width: screenWidth }}
            onValueChange={sel_ValueChange}
          >
            {dataSoure.map((value, index) => {
              return (
                <Picker.Item key={value + index} label={value} value={value} />
              );
            })}
          </Picker>
        </View>
      </Modal>
    );
  };

  componentDidMount() {

    this._loadPatienBaseInfo()
  }

  _loadPatienBaseInfo() {

    let { patient_no } = this.props.navigation.state.params.pinfo;

    let formData = new FormData()
    formData.append('pno', patient_no)

    // name sex birthday bed_no allergy


    patientBaseInfo(formData, resp => {
      let { code, msg, data = {} } = resp

      if (code == '0') {
        let { identityInfo = {} } = data
        let { name, birthDate, bed, sex, allegy } = identityInfo

        let ne_p = {
          name: name,
          sex: sex,
          birthday: birthDate,
          bed_no: bed,
          allergy: allegy,
        }
        this.setState({
          P_b_info: ne_p,
        })
      }
    })
  }

  _initDate = () => {
    let {
      task_date,
      in_bed,
      direction,
      condition,
      fridge
    } = this.props.navigation.state.params.taskInfo;

    this.setState({
      task_date: task_date,
      in_bed: in_bed == 1 ? true : false,
      direction: direction,
      condition: condition,
      fridge: fridge
    });
  };

  _realutAddOxygen() {
    let params = new FormData();

    let {
      patient_no,
      task_id = null
    } = this.props.navigation.state.params.pinfo;

    let { user_id } = this.props.user_info;

    params.append("patient_no", patient_no);
    // params.append("tour_task_id", task_id);
    // params.append("create_by", user_id);
    params.append("in_bed", this.state.in_bed ? 1 : 0);
    params.append("direction", this.state.direction);
    params.append("fridge", this.state.fridge);
    params.append("condition", this.state.condition);
    params.append("nurse_id", user_id);

    addTourNormal(params, resp => {
      let { code, msg } = resp;
      this.setState({
        isCommitSuccess: code == "0"
      }, this.CenterModel.open())

    });
  }

  addOxygen = () => {
    this._realutAddOxygen();
    return;

    let { tour_rec_id } = this.props.navigation.state.params.taskInfo;
    if (!tour_rec_id) {
      this._realutAddOxygen();
    } else {
      let params = new FormData();

      let { user_id } = this.props.user_info;

      params.append("tour_rec_id", tour_rec_id);
      params.append("update_by", user_id);

      params.append("in_bed", this.state.in_bed ? 1 : 0);
      params.append("direction", this.state.direction);

      params.append("fridge", this.state.fridge);

      params.append("condition", this.state.condition);

      modifyTourNormal(params, resp => {
        let { code, msg } = resp;
        if (code == "0") {
          this.props.navigation.state.params.commitSuccessCB();
          this.props.navigation.goBack();
        }
        Toast.showWithGravity(msg, 0.3, Toast.CENTER);
      });
    }
  };

  renderModalContent = () => {
    return (
      <View style={{ flex: 1, alignItems: 'center', }}>
        <Text style={{ color: 'red', fontSize: 16, fontWeight: '600', paddingTop: 15, paddingBottom: 15, }}>
          {this.state.isCommitSuccess ? "提交成功" : "提交失败"}
        </Text>

        <Text style={{ paddingLeft: 15, paddingRight: 15, fontSize: 14, paddingTop: 20, paddingBottom: 20 }}>

          {this.state.isCommitSuccess ? "您已成功提交常规巡视，是否返回扫码页面继续扫码添加" : "对不起！您的常规巡视提交失败"}

        </Text>

        <View style={{ flexDirection: 'row' }}>

          <Button
            style={[
              styles.buttonCommit,
              { backgroundColor: '#33A3F4', width: 100, height: 40 }
            ]}
            onPress={() => {
              if (this.state.isCommitSuccess) {
                this.props.navigation.state.params.commitSuccessCB();
                this.props.navigation.goBack();
              } else {
                this.CenterModel.close();
              }
            }}
          >
            <Text
              style={{
                fontSize: 16,
                color: theme_text.background_Color
              }}
            >
              {this.state.isCommitSuccess ? "继续扫码" : "确定"}
            </Text>
          </Button>
          <View style={{ width: 20 }} />

          <Button
            style={[
              styles.buttonCommit,
              { backgroundColor: "green", width: 100, height: 40 }
            ]}

            onPress={() => {
              let { currentRouterKey } = this.props.navigation.state.params;
              this.props.navigation.goBack(currentRouterKey);
            }}
          >
            <Text
              style={{
                fontSize: 16,
                color: theme_text.background_Color
              }}
            >
              返回首页
            </Text>
          </Button>

        </View>


      </View>
    )
  }

  render() {
    let dt_time = this.state.task_date;

    return (
      <View style={styles.container}>

        <PatientBaseHeader baseInfo={this.state.P_b_info} />
        <View
          style={[
            styles.limeItem,
            {
              flexDirection: "row",
              alignItems: "center",
              paddingLeft: 10,
              paddingRight: 10
            }
          ]}
        >
          <Text style={{ fontSize: 15 }}>
            时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间:
          </Text>
          <View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
          >
            <Text>{dt_time ? dateTransform(dt_time, "hh:mm") : null}</Text>
          </View>
        </View>

        <View
          style={[
            styles.limeItem,
            {
              height: this.state.in_bed ? 45 : 90
            }
          ]}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              height: 45,
              paddingLeft: 10,
              paddingRight: 10,
              borderBottomColor: "#efefef",
              borderBottomWidth: 1
            }}
          >
            <Text style={{ fontSize: 15 }}>
              在&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;床:
            </Text>

            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Switch
                onValueChange={value => this.setState({ in_bed: value })}
                style={{ marginBottom: 10, marginTop: 10 }}
                value={this.state.in_bed}
              />
            </View>
          </View>

          {/* 去向 */}
          <View
            style={[
              styles.limeItem,
              {
                flexDirection: "row",
                alignItems: "center",
                paddingLeft: 10,
                paddingRight: 10
              }
            ]}
          >
            <Text style={{ fontSize: 15 }}>
              去&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向:
            </Text>
            <TouchableOpacity
              onPress={() => {
                this.qxModel.open();
              }}
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Text>
                {this.state.direction === "null" ? "" : this.state.direction}
              </Text>
            </TouchableOpacity>
          </View>
        </View>

        <View
          style={[
            styles.limeItem,
            {
              flexDirection: "row",
              alignItems: "center",
              paddingLeft: 10,
              paddingRight: 10
            }
          ]}
        >
          <Text style={{ fontSize: 15 }}>
            病&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情:
          </Text>

          <TouchableOpacity
            onPress={() => {
              this.bqModel.open();
            }}
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <Text>
              {this.state.condition === "null" ? "" : this.state.condition}
            </Text>
          </TouchableOpacity>
        </View>

        <View
          style={[
            styles.limeItem,
            {
              flexDirection: "row",
              alignItems: "center",
              paddingLeft: 10,
              paddingRight: 10
            }
          ]}
        >
          <Text style={{ fontSize: 15 }}>冰箱卫生:</Text>

          <TouchableOpacity
            onPress={() => {
              this.bxwsModel.open();
            }}
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <Text>{this.state.fridge === "null" ? "" : this.state.fridge}</Text>
          </TouchableOpacity>
        </View>

        <View
          style={{
            width: screenWidth,
            height: 80,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <Button
            style={[
              styles.buttonCommit,
              { backgroundColor: theme_btnColor.main_color }
            ]}
            onPress={this.addOxygen}
          >
            <Text
              style={{
                fontSize: 18,
                color: theme_text.background_Color
              }}
            >
              提交
            </Text>
          </Button>
        </View>

        {this._renderModalBox(
          res => (this.qxModel = res),
          () => {
            this.qxModel.close();
          },
          ["图书馆", "活动室", "散步", "康保", "理疗", "餐厅", "请假", "其他"],
          this.state.direction,
          (itemValue, itemIndex) => {
            this.setState({ direction: itemValue });
          }
        )}

        {/* // */}

        {this._renderModalBox(
          res => (this.bqModel = res),
          () => {
            this.bqModel.close();
          },
          ["无特殊", "特殊"],
          this.state.condition,
          (itemValue, itemIndex) => {
            this.setState({ condition: itemValue });
          }
        )}

        {/* // */}

        {this._renderModalBox(
          res => (this.bxwsModel = res),
          () => {
            this.bxwsModel.close();
          },

          ["正常", "已协助处理"],
          this.state.fridge,
          (itemValue, itemIndex) => {
            this.setState({ fridge: itemValue });
          }
        )}


        <Modal
          style={styles.modalCenter}
          position={"bottom"}
          backdropPressToClose={false}
          swipeToClose={false}
          ref={md => (this.CenterModel = md)}
        >
          {this.renderModalContent()}
        </Modal>

        {/* // */}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  },
  limeItem: {
    width: screenWidth,
    height: 45,
    backgroundColor: "white",
    borderBottomColor: "#efefef",
    borderBottomWidth: 1,

  },
  modal3: {
    height: 250,
    width: screenWidth
  },

  modalCenter: {
    height: 200,
    width: screenWidth
  },
  buttonCommit: {
    width: 200,
    // height: 46,

    borderRadius: 6
  }
});

function select(store) {
  return { user_info: store.userInfo.user_info };
}

export default connect(select)(ConventionAdd);
